<template>
  <div>
    <h1>vue渲染的问题</h1>
    <pre>
        vue2对象的新增属性不能响应式渲染
        官方解决方案：
            this.$set(对象,key,修改后的值)
        vue2数组只有数组对应的能修改源数组的数组方法能响应式更新
        官方解决方案：
            this.$set(数组,索引,修改后的值)

        非官方解决方案
           静默刷新
             不更新的数据的最外层 加一个v-if="bol"
             data 定义  bol=true
             this.bol=false
             this.$nextTick(()=>{
                this.bol=true
             })
             静默刷新还有一个作用
             1：数据修改了，页面没渲染就使用静默刷新
             2：组件内所有数据的还原

    </pre>
    <div v-if="bol">
      <div>{{ obj }}</div>
      <button @click="setObj">修改obj</button>
      <div>{{ arr }}</div>
      <button @click="setArr">修改arr</button>
    </div>
    <button @click="reset">重置testSon</button>
    <TestSon v-if="show" />
  </div>
</template>
<script>
import TestSon from './components/testSon'
export default {
  components: {
    TestSon
  },
  data() {
    return {
      obj: { a: 1 },
      arr: [1, 2, 3],
      bol: true,
      show: true
    }
  },
  methods: {
    setObj() {
      this.obj.b = 2
      //   this.$set(this.obj, 'b', 2)
      console.log(this.obj)
      this.reFn()
    },
    setArr() {
      //   this.arr.push(4)
      this.arr[0] = 0
      //   this.$set(this.arr, 0, 0)
      console.log(this.arr)
      this.reFn()
    },
    reFn() {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    },
    reset() {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    }
  }
}
</script>
<style></style>
